<template>
<div class="message-box" v-show="show">
  <div class="wrapper">
    <div class="top">
      <i class="el-icon-info"></i>
      <span v-text="'　' + title"></span>
      <i class="el-icon-close"  @click="cancel"></i>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="bottom">
      <button @click="cancel">取消</button>
      <button @click="affirm">确认</button>
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '提示!'
    }
  },
  methods: {
    cancel () {
      this.$emit('cancel')
    },
    affirm () {
      this.$emit('affirm')
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/scss/base.scss";
.message-box{
  @include msg-wrapper();
  .wrapper{
    width: $msg-w;
    min-height: $msg-h;
    background: #FFF;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -($msg-h / 2);
    margin-left: -($msg-w / 2);
    .top{
      height: 60px;
      line-height: 60px;
      position: relative;
      i, span{
        font-size: 30px;
        color: $c-warning;
        height: 60px;
        line-height: 60px;
      }
      span{
        font-size: 20px;
        vertical-align: top;
        display: inline-block;

      }
      .el-icon-info{
        margin-left: 20px;
      }
      .el-icon-close{
        position: absolute;
        top: 0;
        right: 20px;
        cursor: pointer;
      }
    }
    .content{
      width: 90%;
      margin: 5px 5%;
      // border: 1px solid red;
    }
    .bottom{
      text-align: right;
      position: absolute;
      bottom: 20px;
      right: 26px;
      button{
        border: none;
        background: $c-b-one;
        width: 100px;
        height: 30px;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>

